<template>
    <div>
        <div ref="chartBarRef" class="flex flex-jc-sb items-center">
            <div>{{ title }}</div>
            <div>
                <slot></slot>
            </div>
        </div>
        <div class="chart-container" ref="chartRef">
            <button @click="doRandom">Random</button>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    title: {
        type: String,
        default: '近七日销售趋势'
    }
})

const chartRef = ref(null)
const chartBarRef = ref(null)
let myChart = null

const setOption = () => {
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        legend: {},
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    })
}

const resize = () => {
    myChart.resize()
}

defineExpose({
    chartBarRef,
    resize
})
onActivated(() => {
    myChart = echarts.init(chartRef.value)
    setOption()
 })
onMounted(() => {
    myChart = echarts.init(chartRef.value)
    setOption()
})
</script>
<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 500px;
}
</style>